<template>
    <div class="main">

        <!--  轮播图片 -->
        <div class='pogoSlider' id='js-main-slider' v-if="slideList.length">
            <div
                    v-for="(item,index) in slideList"
                    :key="index"
                    class='pogoSlider-slide'
                    :style="{'background-image':`url(${item.img})`}"
                    data-duration='1000'
                    data-transition=fade
            >
                <div class="container" v-if="item.title">
                    <div class="slider-content">
                        <div class="row">
                            <div class="col-xs-12 col-sm-12 col-md-8">
                                <h2 class=pogoSlider-slide-element data-delay=500 data-duration=750 data-in=slideDown
                                    data-out="slideUp">{{item.title}}</h2>
                                <p class="pogoSlider-slide-element hidde" data-delay=900 data-duration=750
                                   data-in=slideRight
                                   data-out="slideUp" v-if="item.content">{{item.content}}</p>
                                <a v-if="item.isChecked" :href="item.url || '#'" target="_blank"
                                   class="pogoSlider-slide-element button-lg button-primary mt-30"
                                   data-delay="500" data-duration="1150" data-in="slideRight"
                                   data-out="slideDown">阅读更多</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <!-- 技术优势 -->
        <div class="section-block" v-if="technologicalList.length">
            <div class="container">
                <div class="center-holder section-heading">
                    <h2>再生资源 + 软件研发</h2>
                    <p>一站式再生资源利用系统、商城系统、积分系统、大屏系统、微信小程序、APP研发</p>
                </div>
                <div class="owl-carousel owl-theme" id="articles-services">

                    <article
                            class="clearfix service-article"
                            v-for="(item,index) in technologicalList"
                            :key="index"
                    >
                        <div class=article-icon>
                            <img :src="item.img" style=" width: 46px; margin: 0 8px;">
                        </div>
                        <div class=article-text>
                            <h3>{{item.title}}</h3>
                            <p>{{item.content}}</p>
                            <a @click="toDetails(item,'technological')">阅读更多</a>
                        </div>
                    </article>

                </div>
            </div>
        </div>

        <!-- 服务项目 -->
        <div class="section-block-grey" v-if="serviceProjectList.length">
            <div class=container>
                <div class="center-holder section-heading">
                    <h2>为什么选择我们？</h2>
                    <p>项目研发前、研发过程和研发售后的一条龙服务,全过程把满足客户需求作为企业活动的核心。</p>
                </div>
                <div class=row>
                    <div
                            class="col-xs-12 col-sm-6 col-md-4"
                            v-for="(item,index) in serviceProjectList"
                            :key="index"
                    >
                        <div class="clearfix service-box">
                            <div class="box-icon">
                                <img :src="item.img" style=" width: 52px;">
                            </div>
                            <div class=box-content>
                                <p>{{item.content}}</p>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <!-- 企业说明 -->
        <div class="section-block" v-if="companyDetails">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12 col-md-12 col-sm-12">
                        <h2>{{companyDetails.title}}</h2>
                        <div v-html="companyDetails.text"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 我们的服务-->
        <div class="section-block-grey" v-if="serviceList.length">
            <div class="container">
                <div class="center-holder section-heading">
                    <h2>我们的服务</h2>
                    <p>坚持立项、 沟通、 实施、 反馈、 处理、 售后的一整套服务流程</p>
                </div>
                <div class="row">
                    <div
                            class="col-xs-12 col-md-4 col-sm-4"
                            v-for="(item,index) in serviceList"
                            :key="index"
                    >
                        <div class="service-grid">
                            <img alt="service-image" :src="item.img">
                            <div class="inner-padd">
                                <h4>{{item.title}}</h4>
                                <p>{{item.content}}</p>
                                <a @click="toDetails(item,'service')">阅读更多</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 团队介绍 -->
        <div class="section-block" v-if="teamList.length">
            <div class="container">
                <div class="center-holder section-heading">
                    <h2>团队成员</h2>
                    <p>我们有一流技术的工程师，更有高瞻远瞩的领导者；凭借拔尖的团队、优秀的业务能力，我们迅速成长。</p>
                </div>
                <div class=row>
                    <div
                            class="col-xs-12 col-sm-6 col-md-3"
                            v-for="(item,index) in teamList"
                            :key="index"
                    >
                        <div class="team-member">
                            <div class="team-member-image">
                                <img :src="item.avatar">
                                <div class="team-member-overlay">
                                    <div class="team-member-content">
                                        {{(item.skill || []).join('、')}}
                                    </div>
                                </div>
                            </div>
                            <div class=team-member-name>
                                <h4>{{item.name}}</h4>
                                <h6>{{item.position}}</h6>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <!-- 项目案例 -->
        <div class="section-block-grey" v-if="projectsList.length">
            <div class="container">
                <div class="center-holder section-heading">
                    <h2>项目案例</h2>
                    <p>
                        我们专注一站式再生资源利用系统、商城系统、积分系统、大屏系统、微信小程序、APP研发等业务。
                    </p>
                </div>
                <div class="latest-projects">
                    <div class="row">
                        <div class="isotope-grid">
                            <div
                                    class="col-xs-12 col-sm-6 col-md-4 isotope-item business"
                                    v-for="(item,index) in projectsList"
                                    :key="index"
                            >
                                <div class="project-item" @click="toDetails(item,'project')">
                                    <div class="overlay-container" style="height: 240px;">
                                        <img alt="project-img" :src="item.img"
                                             style="height: 240px;box-shadow: 2px 2px 20px #c5c3c3;">
                                        <div class="project-item-overlay">
                                            <h4>{{item.title}}</h4>
                                            <p style=" width: 80%; text-overflow: ellipsis;text-align: center;">
                                                {{item.content}}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>


                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 企业资讯  -->
        <div class="section-block" v-if="newsList.length">
            <div class="container">
                <div class="center-holder section-heading">
                    <h2>企业资讯</h2>
                    <p>汇集了公司内部、外部、合作伙伴最新信息的简讯。</p>
                </div>
                <div class="row">

                    <div class="col-xs-12 col-md-4 col-sm-12" v-for="(item,index) in newsList" :key="index">
                        <div class="blog-grid">
                            <div class="blog-grid-img">
                                <img alt="blog-img" :src="item.img">
                            </div>
                            <div class="inner-padd blog-grid-content">
                                <h4>
                                    <a @click="toDetails(item,'information')">{{item.title}}</a>
                                </h4>
                                <div class="admin-info">
                                    <i class="icon-users"></i>
                                    <span>{{item.author}}</span>
                                </div>
                                <div class="admin-info">
                                    <i class="icon-calendar-6"></i>
                                    <span>{{new Date(item._createTime).Format('yyyy年MM月dd日')}}</span>
                                </div>
                                <p>{{item.content}}</p>
                                <div class='blog-grid-button'>
                                    <a @click="toDetails(item,'information')">阅读更多</a>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

    </div>
</template>

<script>

    /**
     * 首页数据展示
     */
    import {
        editInformation, editProject, editService,
        getBaseData,
        getCarouselList, getInformationList, getProjectList,
        getServiceProjectData,
        getServicesList, getTeamList,
        getTechnologicalData
    } from "../api/base";

    export default {
        name: 'Home',
        data() {
            return {
                slideList: [],  // 轮播图片和内容
                technologicalList: [],  // 技术优势
                serviceProjectList: [],// 服务项目
                companyDetails: null, // 企业说明
                serviceList: [],// 我们的服务
                teamList: [],// 团队介绍
                projectsList: [],// 项目案例
                newsList: [], // 新闻资讯
            }
        },
        mounted() {
            this.getDataSource();
        },
        methods: {
            getDataSource: async function () {
                this.slideList = await getCarouselList();
                this.technologicalList = await getTechnologicalData();
                setTimeout(() => {
                    this.loadHtml();
                }, 500);
                this.serviceProjectList = await getServiceProjectData();
                let info = await getBaseData();
                if (info) {
                    info.forEach((item) => {
                        let key = item['keywords'];
                        if (key === 'company-introduce') {
                            this.companyDetails = item;
                        }
                    });
                }
                let params1 = {
                    paging: {
                        currPage: 1,
                        pageSize: 3
                    }
                };
                let params = {
                    paging: {
                        currPage: 1,
                        pageSize: 6
                    }
                };
                this.serviceList = await getServicesList(params1);
                this.teamList = await getTeamList(params1);
                this.projectsList = await getProjectList(params);
                this.newsList = await getInformationList(params1);
            },

            //前往详情
            toDetails: async function (item, type) {
                let query = {};
                if (item) {
                    query['item'] = encodeURIComponent(JSON.stringify(item));
                }
                switch (type) {
                    case 'technological':
                        //技术优势
                        this.$router.push({path: '/services_details', query})
                        break;
                    case 'service':
                        //服务内容
                        if (item['_id']) {
                            await editService({id: item['_id']});
                        }
                        this.$router.push({path: '/services_details', query})
                        break;
                    case 'project':
                        //项目案例
                        if (item['_id']) {
                            await editProject({id: item['_id']});
                        }
                        this.$router.push({path: '/projects_details', query})
                        break;
                    case 'information':
                        //企业资讯
                        if (item['_id']) {
                            await editInformation({id: item['_id']});
                        }
                        this.$router.push({
                            path: '/information_details',
                            query: {
                                item: encodeURIComponent(JSON.stringify(item))
                            }
                        })
                        break;
                }
            },

            // 刷新幻灯片样式
            loadHtml: function () {
                $('#js-main-slider').pogoSlider();
                $('#articles-services').owlCarousel({
                    loop: false,
                    nav: false,
                    responsiveClass: true,
                    responsive: {
                        0: {
                            items: 1,
                            margin: 30,
                        },
                        600: {
                            items: 2,
                            margin: 30,
                        },
                        1000: {
                            items: 3,
                            margin: 30,
                        }
                    }
                })
            },
        }
    }
</script>

<style scoped>
</style>
